<template>
	<view class="goods-area" v-show="isShow">
		<view class="goods-main">
			<!--菜品分类-->
			<scroll-view id="classify" scroll-with-animation="true" scroll-y="true" :scroll-top="classifyScrollTop"
				class="classify">
				<view :class="{item:true, active:item.active}" v-for="(item,index) in classifys" :key="item.cid"
					@click="clickClassify(index)">
					<view>{{item.title}}</view>
				</view>
				<view style="height:170rpx;"></view>
			</scroll-view>
			<!--菜品展示-->
			<scroll-view scroll-y="true" id="goods-wrap" class="goods-wrap" scroll-with-animation="true"
				:scroll-top="goodsScrollTop" @scroll="eventGoodsScroll">
				<view class="goods-classify">
					<block v-for="(item,index) in goods" :key="item.cid">
						<view class="goods-classify-wrap">
							<view class="classify-name"
								:style="{position:item.position,left:item.left+'px',top:item.top+'px',zIndex:10}">
								{{item.title}}
							</view>
							<view class="goods-list-wrap">
								<view class="goods-list" v-for="(item2,index2) in item.goods" :key="item2.gid"
									@click="showGoodsDetails(item2.gid,item2.is_meal,item2.amount,item2.sell_status,item2.stock)">
									<view class="image">
										<image :lazy-load="true" :src="item2.image"></image>
									</view>
									<view class="goods-info">
										<view class="goods-title">{{item2.title}}</view>
										<view class="sales">销量：{{item2.sales}}</view>
										<!--如果是套餐-->
										<view class="meal" v-if="item2.is_meal=='1'">
											<view class="price">￥15</view>
											<view class="meal-buy">购买</view>
										</view>
										<!--如果非套餐-->
										<view class="price-wrap" v-else>
											<view class="price">￥{{item2.price}}</view>
											<view class="amount">
												<!--如果没有库存-->
												<template v-if="item2.stock<=0">
													<view class="handle-amount">
														<text>已售光</text>
													</view>
												</template>
												<!--
                                                如果菜品售卖在全部时间段
                                                -->
												<template v-else-if="item2.sell_time_type=='0'">
													<view class="handle-amount">
														<!--如果数量大于0，显示减号-->
														<view class="dec"></view>
														<!--
                                                        为了防止scroll-view组件内使用input卡顿的问题，先使用view组件显示数量，单击该组件，显示input输入框，并隐藏view组件，输入完成后使用@blur事件，隐藏input组件，显示view组件
                                                        -->
														<view class="text">1</view>
														<!-- <input  :value="1" type="number" /> -->
														<view class="inc"
															@click.stop="incAmount(item2.gid,item2.new_meal_items,item2.meal_items)">
														</view>
													</view>
												</template>
												<!--
                                                如果菜品售卖在自定义时间段
                                                -->
												<template v-else>
													<!--在售卖期-->
													<template v-if="item2.sell_status=='1'">
														<view class="handle-amount">
															<view class="dec"></view>
															<view class="text">1</view>
															<!-- <input :value="1" type="number" /> -->
															<view class="inc"
																@click.stop="incAmount(item2.gid,item2.new_meal_items,item2.meal_items)">
															</view>
														</view>
													</template>
													<template v-else>
														<text>非可售时间</text>
													</template>
												</template>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view style="width:100%;height:190rpx;"></view>
			</scroll-view>
		</view>
		<goods-details :show="isShowGoodsDetails" @close="isShowGoodsDetails=false" :branchShopId="branchShopId"
			:gid="gid"></goods-details>
	</view>
</template>

<script>
	import GoodsDetails from "../../components/goods/details";
	export default {
		name: "goods-component",
		data() {
			return {
				classifys: [], //菜品分类
				goods: [], //菜品
				goodsScrollTop: 0,
				classifyScrollTop: 0,
				isShowGoodsDetails: false //是否显示菜品详情组件
			}
		},
		props: {
			//是否显示菜品组件
			isShow: {
				type: Boolean,
				default: false
			},
			//菜品分类
			classifysData: {
				type: Array,
				default: () => []
			},
			//菜品
			goodsData: {
				type: Array,
				default: () => []
			},
			//菜品的id
			gid: {
				type: String,
				default: ""
			},
			//是否有上架或下架的菜品
			shelfGoods: {
				type: Boolean,
				default: false
			},
			//分店的id
			branchShopId: {
				type: String,
				default: ""
			}
		},
		mounted() {
			this.goodsWrapTop = 0;
			this.goodsWrapLeft = 0;
			this.goodsWrapHeight = 0;
			this.tmpGoodsScrollTop = 0;
			this.goodsObj = {};
			if (this.goodsData && this.goodsData.length > 0) {
				this.goods = this.goodsData;
			}
			if (this.classifysData && this.classifysData.length > 0) {
				this.classifys = this.classifysData;
			}
		},
		watch: {
			//监听菜品分类
			classifysData(val) {
				this.classifys = val;
			},
			//监听菜品
			goodsData(val) {
				this.goods = val;
			},
			goods() {
				//获取菜品的位置
				this.getGoodsPosition()
			},
			classifys() {
				//获取菜品分类的位置
				this.getClassifyPosition();
			},
			shelfGoods(val) {
				if (val) {
					this.goodsScrollTop = 0;
					this.classifyScrollTop = 0;
				}
			}
		},
		methods: {
			//点击左侧菜品分类
			clickClassify(index) {
				if (this.classifys.length > 0) {
					for (let i = 0; i < this.classifys.length; i++) {
						if (this.classifys[i].active) {
							this.classifys[i].active = false;
							break;
						}
					}
					this.classifys[index].active = true;
					this.$set(this.classifys, index, this.classifys[index]);
					this.goodsScrollTop = this.tmpGoodsScrollTop;
					setTimeout(() => {
						this.goodsScrollTop = this.classifys[index].goodsTop - 30;
					}, 50)
				}
			},
			//获取菜品的位置
			getGoodsPosition() {
				let goodsWrap = uni.createSelectorQuery().in(this).select("#goods-wrap");
				goodsWrap.boundingClientRect(data => {
					this.goodsWrapTop = data.top;
					this.goodsWrapLeft = data.left;
					this.goodsWrapHeight = data.height;
					let goodsClassifyWrap = uni.createSelectorQuery().in(this).selectAll(".goods-classify-wrap");
					goodsClassifyWrap.boundingClientRect(data => {
						if (data.length > 0) {
							let goodsTop = 0;
							for (let i = 0; i < data.length; i++) {
								goodsTop = data[i].top - this.goodsWrapTop;
								this.classifys[i].goodsTop = goodsTop;
								this.classifys[i].goodsHeight = data[i].height;
								this.goods[i].top = goodsTop;
							}

							//获取每个菜品的top
							let goodsList = uni.createSelectorQuery().in(this).selectAll(".goods-list");
							goodsList.boundingClientRect(data => {
								if (data.length > 0) {
									let itemIndex = 0;
									for (let i = 0; i < this.goods.length; i++) {
										for (let j = 0; j < this.goods[i].goods.length; j++) {
											this.goods[i].goods[j].itemTop = data[itemIndex].top;
											itemIndex++;
											let gid = this.goods[i].goods[j].gid;
											//将菜品的gid和值存放到this.goodsObj中，目的为了从菜品搜索页面进入点餐页面的菜品定位
											this.goodsObj[gid] = this.goods[i].goods[j].itemTop;
										}
									}
									//定位菜品的位置
									this.setItemPosition();
								}
							}).exec();
						}
					}).exec();
				}).exec();
			},
			//定位菜品的位置
			setItemPosition() {
				if (this.gid && this.goods.length > 0) {
					let itemTop = this.goodsObj[this.gid];
					setTimeout(() => {
						this.goodsScrollTop = itemTop - this.goodsWrapTop * 1.2;
					}, 50)
				}
			},
			//监听菜品滚动事件
			eventGoodsScroll(e) {
				if (this.classifys.length > 0) {
					this.tmpGoodsScrollTop = e.detail.scrollTop;
					for (let i = 0; i < this.classifys.length; i++) {
						//菜品在可视区域内
						if (e.detail.scrollTop >= this.classifys[i].goodsTop - 90 && e.detail.scrollTop <= this.classifys[
								i].goodsTop + this.classifys[i].goodsHeight) {
							//将菜品不在可视区域的active设置为false
							for (let key in this.classifys) {
								if (this.classifys[key].active) {
									this.classifys[key].active = false;
									break;
								}
							}

							//计算是否滚动到底部
							if (parseInt(e.detail.scrollTop / e.detail.scrollHeight * 100) >= 92) {
								this.classifys[this.classifys.length - 1].active = true;
							} else {
								this.classifys[i].active = true;
							}

							//菜品分类滚动到相应的菜品位置
							this.classifyScrollTop = this.classifys[i].top;

							if (this.goods && this.goods.length > 0) {
								//将非可视区域的菜品的分类标题设置成static
								for (let key in this.goods) {
									if (this.goods[key].position == 'fixed') {
										this.goods[key].position = "static";
										this.goods[key].top = 0;
										this.goods[key].left = 0;
										break;
									}
								}

								//将可视区域的菜品的分类标题设置成固定定位
								this.goods[i].position = "fixed";
								this.goods[i].top = this.goodsWrapTop;
								this.goods[i].left = this.goodsWrapLeft;

								//快要滚动到顶部，清除所有固定定位
								if (e.detail.scrollTop <= 100) {
									for (let key in this.goods) {
										if (this.goods[key].position == 'fixed') {
											this.goods[key].position = "static";
											this.goods[key].top = 0;
											this.goods[key].left = 0;
											break;
										}
									}
								}

							}
						}
					}
				}
			},
			//获取菜品分类的位置
			getClassifyPosition() {
				let classify = uni.createSelectorQuery().in(this).select("#classify");
				classify.boundingClientRect(data => {
					let classifyTop = data.top;
					let classifyItem = uni.createSelectorQuery().in(this).selectAll("#classify .item");
					classifyItem.boundingClientRect(data => {
						if (data.length > 0) {
							for (let i = 0; i < data.length; i++) {
								this.classifys[i].top = data[i].top - classifyTop;
							}
						}
					}).exec()
				}).exec();
			},
			//显示菜品详情组件
			showGoodsDetails(gid, isMeal, amount, sellStatus, stock) {
				//如果在售卖期并且有库存
				if (sellStatus == '1' && stock > 0) {
					if (isMeal !== '1') { //非套餐
						this.isShowGoodsDetails = true;
					}
					this.$emit("showGoodsDetails", gid, isMeal, amount, sellStatus, stock);
				}
			},
			//增加数量
			incAmount(gid, newMealItems, mealItems) {
				this.$emit("incAmount", gid, newMealItems, mealItems);
			}
		},
		components: {
			GoodsDetails
		}
	}
</script>
<style scoped>
	.goods-area {
		width: 100%;
	}

	.goods-main {
		width: 100%;
		height: 70vh;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}

	.goods-main .classify {
		height: 90%;
		width: 156rpx;
		background-color: #fafafa;
	}

	.goods-main .classify .item {
		width: 100%;
		height: 72rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		position: relative;
		z-index: 1;
	}

	.goods-main .classify .item view {
		width: 80%;
		font-size: 28rpx;
		color: #999999;
		position: absolute;
		z-index: 1;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%)
	}

	.goods-main .classify .item.active {
		background-color: #FFFFFF;
	}

	.goods-main .classify .item.active view {
		color: #333333
	}

	.goods-main .goods-wrap {
		width: 76%;
		height: 90%;
	}

	.goods-main .goods-classify {
		width: 100%;
	}

	.goods-main .goods-classify .classify-name {
		width: 100%;
		height: auto;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		background-color: #FFFFFF;
	}

	.goods-main .goods-list-wrap {
		width: 100%;
		height: auto;
		margin-bottom: 20rpx;
	}

	.goods-main .goods-list-wrap .goods-list {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		align-items: center
	}

	.goods-main .goods-list-wrap .goods-list .image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 6px;
	}

	.goods-main .goods-list-wrap .goods-list .image image {
		width: 100%;
		height: 100%;
		border-radius: 6px;
	}

	.goods-main .goods-list .goods-info {
		width: 62%;
		height: auto;
		margin-right: 20rpx;
	}

	.goods-main .goods-list .goods-title {
		width: 100%;
		height: 80rpx;
		overflow: hidden;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.goods-main .goods-list .sales {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.goods-main .goods-list .points {
		font-size: 24rpx;
		color: #D6001C;
		margin-top: 10rpx;
	}

	.goods-main .goods-list .price {
		font-size: 28rpx;
		color: #fb4e44;
		font-weight: bold;
	}

	.goods-main .goods-list .price-wrap {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.goods-main .goods-list .meal {
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.goods-main .goods-list .meal .meal-buy {
		width: 110rpx;
		height: 50rpx;
		background-color: #D6001C;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
		font-size: 28rpx;
		border-radius: 4px;
	}

	.goods-main .goods-list .amount {
		width: auto;
		height: auto;
		display: flex;
	}

	.goods-main .goods-list .amount text {
		font-size: 24rpx;
		color: #999999;
	}

	.goods-main .goods-list .handle-amount {
		width: auto;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.goods-main .goods-list .handle-amount .dec {
		width: 55rpx;
		height: 55rpx;
		background-image: url("~@/static/images/main/dec.png");
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.goods-main .goods-list .handle-amount .inc {
		width: 55rpx;
		height: 55rpx;
		background-image: url("~@/static/images/main/inc.png");
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	.goods-main .goods-list .handle-amount .text {
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;
		margin-left: 10rpx;
		width: 50rpx;
		text-align: center;
	}

	.goods-main .goods-list .start-sell {
		width: 100%;
		height: auto;
		font-size: 24rpx;
		color: #999999;
	}

	.goods-main .goods-list .handle-amount input {
		width: 50rpx;
		height: 100%;
		text-align: center;
		margin-right: 10rpx;
		margin-left: 10rpx;
	}
</style>